<!DOCTYPE html>
<uieip type="page" value="login" debug="true"></uieip>
<uieip type="reg" value="console"></uieip>
<html>

<head>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" minute="10"></uieip>
    <uieip type="file" value="js" src="/yqwin/src/yqwin.min" minute="10"></uieip>
    <title>Python Online Debugger</title>
    <style>
        .td_output>.CodeMirror {
            background-color: #fefff4;
        }
    </style>
</head>

<body>
    <table style="width: 100%;">
        <tr>
            <td style="vertical-align: top;padding:0 0 0 5px;">
                <p>Python Code</p>
                <textarea id="pythonCode" style="width: 100%;height: 400px;" placeholder="Enter your Python code here">
    a = 9
    print(a+3)  # 预期输出: 5
    print(10+a)  # 预期输出: 30
</textarea>
            </td>
            <td class="td_output" style="vertical-align: top;padding:0;">
                <p>Output</p>
                <textarea id="output" style="width: 100%;height: 400px;"></textarea>
            </td>
        </tr>
        <tr>
            <td style="padding: 5px;text-align: right;">
                <button id="formatBtn">Format</button>
                <button id="executeBtn">Execute</button>
                <button id="clearBtn">Clear</button>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <script>
        $(function () {
            $("#pythonCode").yqCodeEdit({
                types: ["python"],
                type: "python"
            });

            $("#output").yqCodeEdit({
                types: ["text"],
                type: "text",
                isEdit: false,
            });

            $('#formatBtn').linkbutton({
                width: 90,
                height: 35,
                text: 'Format',
                iconCls: 'fa fa-align-justify',
                onClick: function () {
                    const code = $("#pythonCode").yqCodeEdit("getValue");
                    if (!code.trim()) {
                        alert('Please enter some Python code');
                        return;
                    }

                    $('#output').text('Executing...');

                    $.ajax({
                        url: '/_python.html?action=format',
                        type: 'POST',
                        data: code,
                        contentType: 'text/plain',
                        success: function (response) {
                            $("#pythonCode").yqCodeEdit("setValue", response);
                            $("#output").yqCodeEdit("setValue", "");
                        },
                        error: function (xhr) {
                            $("#output").yqCodeEdit("setValue", xhr.responseText);
                        }
                    });
                }
            })

            $('#executeBtn').linkbutton({
                width: 90,
                height: 35,
                text: 'Execute',
                iconCls: 'fa fa-cogs',
                onClick: function () {
                    const code = $("#pythonCode").yqCodeEdit("getValue");
                    if (!code.trim()) {
                        alert('Please enter some Python code');
                        return;
                    }

                    $('#output').text('Executing...');

                    $.ajax({
                        url: '/_python.html?action=execute',
                        type: 'POST',
                        data: code,
                        contentType: 'text/plain',
                        success: function (response) {
                            $("#output").yqCodeEdit("setValue", response);
                        },
                        error: function (xhr) {
                            $("#output").yqCodeEdit("setValue", xhr.responseText);
                        }
                    });
                }
            });

            $('#clearBtn').linkbutton({
                width: 90,
                height: 35,
                text: 'Clear',
                iconCls: 'fa fa-eraser',
                onClick: function () {
                    $("#pythonCode").yqCodeEdit("setValue", "");
                    $("#output").yqCodeEdit("setValue", "");
                }
            });

            $(window).on('resize', () => resize());
            resize();
        });

        function resize() {
            const width = Math.max(window.innerWidth, 500) / 2 - 10;
            const height = Math.max(window.innerHeight, 350) - 105;

            $("#pythonCode").yqCodeEdit("resize", {
                width: width + 8,
                height: height
            });
            $("#output").yqCodeEdit("resize", {
                width: width,
                height: height
            });
        }
    </script>
</body>

</html>